<!-- src/pages/Admin.vue -->
<template>
    <v-container>
      <v-tabs v-model="tab">
        <v-tab>登录</v-tab>
  
        <v-tab>文章管理</v-tab>
  
        <v-tab>分类管理</v-tab>
  
        <v-tab>标签管理</v-tab>
  
        <v-tab>评论管理</v-tab>
  
      </v-tabs>
  
      <v-tabs-items v-model="tab">
        <v-tab-item>
          <!-- 登录表单 -->
          <v-form @submit.prevent="login">
            <v-text-field v-model="loginForm.username" label="用户名" required></v-text-field>
  
            <v-text-field v-model="loginForm.password" label="密码" type="password" required></v-text-field>
  
            <v-btn type="submit" color="primary">登录</v-btn>
  
          </v-form>
  
        </v-tab-item>
  
        <v-tab-item>
          <!-- 文章管理 -->
          <v-btn color="primary" @click="openArticleDialog">新增文章</v-btn>
  
          <v-data-table :headers="articleHeaders" :items="articles" class="elevation-1">
            <template #item="{ item }">
              <v-btn icon @click="editArticle(item)">
                <v-icon>mdi-pencil</v-icon>
  
              </v-btn>
  
              <v-btn icon @click="deleteArticle(item.id)">
                <v-icon>mdi-delete</v-icon>
  
              </v-btn>
  
            </template>
  
          </v-data-table>
  
          <!-- 文章对话框 -->
          <v-dialog v-model="articleDialog" max-width="600px">
            <v-card>
              <v-card-title>
                <span class="text-h5">{{ editMode ? '编辑文章' : '新增文章' }}</span>
  
              </v-card-title>
  
              <v-card-text>
                <v-form ref="articleForm">
                  <v-text-field v-model="currentArticle.title" label="标题" required></v-text-field>
  
                  <v-textarea v-model="currentArticle.content" label="内容" required></v-textarea>
  
                  <!-- 其他字段如分类、标签等 -->
                </v-form>
  
              </v-card-text>
  
              <v-card-actions>
                <v-btn text @click="closeArticleDialog">取消</v-btn>
  
                <v-btn color="primary" @click="saveArticle">保存</v-btn>
  
              </v-card-actions>
  
            </v-card>
  
          </v-dialog>
  
        </v-tab-item>
  
        <v-tab-item>
          <!-- 分类管理 -->
          <v-btn color="primary" @click="openCategoryDialog">新增分类</v-btn>
  
          <v-data-table :headers="categoryHeaders" :items="categories" class="elevation-1">
            <template #item="{ item }">
              <v-btn icon @click="editCategory(item)">
                <v-icon>mdi-pencil</v-icon>
  
              </v-btn>
  
              <v-btn icon @click="deleteCategory(item.id)">
                <v-icon>mdi-delete</v-icon>
  
              </v-btn>
  
            </template>
  
          </v-data-table>
  
          <!-- 分类对话框 -->
          <v-dialog v-model="categoryDialog" max-width="500px">
            <v-card>
              <v-card-title>
                <span class="text-h5">{{ editCategoryMode ? '编辑分类' : '新增分类' }}</span>
  
              </v-card-title>
  
              <v-card-text>
                <v-form ref="categoryForm">
                  <v-text-field v-model="currentCategory.name" label="分类名称" required></v-text-field>
  
                </v-form>
  
              </v-card-text>
  
              <v-card-actions>
                <v-btn text @click="closeCategoryDialog">取消</v-btn>
  
                <v-btn color="primary" @click="saveCategory">保存</v-btn>
  
              </v-card-actions>
  
            </v-card>
  
          </v-dialog>
  
        </v-tab-item>
  
        <v-tab-item>
          <!-- 标签管理 -->
          <v-btn color="primary" @click="openTagDialog">新增标签</v-btn>
  
          <v-data-table :headers="tagHeaders" :items="tags" class="elevation-1">
            <template #item="{ item }">
              <v-btn icon @click="editTag(item)">
                <v-icon>mdi-pencil</v-icon>
  
              </v-btn>
  
              <v-btn icon @click="deleteTag(item.id)">
                <v-icon>mdi-delete</v-icon>
  
              </v-btn>
  
            </template>
  
          </v-data-table>
  
          <!-- 标签对话框 -->
          <v-dialog v-model="tagDialog" max-width="500px">
            <v-card>
              <v-card-title>
                <span class="text-h5">{{ editTagMode ? '编辑标签' : '新增标签' }}</span>
  
              </v-card-title>
  
              <v-card-text>
                <v-form ref="tagForm">
                  <v-text-field v-model="currentTag.name" label="标签名称" required></v-text-field>
  
                </v-form>
  
              </v-card-text>
  
              <v-card-actions>
                <v-btn text @click="closeTagDialog">取消</v-btn>
  
                <v-btn color="primary" @click="saveTag">保存</v-btn>
  
              </v-card-actions>
  
            </v-card>
  
          </v-dialog>
  
        </v-tab-item>
  
        <v-tab-item>
          <!-- 评论管理 -->
          <v-data-table :headers="commentHeaders" :items="comments" class="elevation-1">
            <template #item="{ item }">
              <v-btn icon @click="approveComment(item.id)">
                <v-icon>mdi-check</v-icon>
  
              </v-btn>
  
              <v-btn icon @click="deleteComment(item.id)">
                <v-icon>mdi-delete</v-icon>
  
              </v-btn>
  
            </template>
  
          </v-data-table>
  
        </v-tab-item>
  
      </v-tabs-items>
  
    </v-container>
  
  </template>
  
  <script>
  export default {
    name: 'Admin',
    data() {
      return {
        tab: null,
        // 登录
        loginForm: {
          username: '',
          password: '',
        },
        // 文章管理
        articleDialog: false,
        editMode: false,
        currentArticle: {},
        articleHeaders: [
          { text: '标题', value: 'title' },
          { text: '分类', value: 'category' },
          { text: '操作', value: 'actions', sortable: false },
        ],
        // 分类管理
        categoryDialog: false,
        editCategoryMode: false,
        currentCategory: {},
        categoryHeaders: [
          { text: '名称', value: 'name' },
          { text: '操作', value: 'actions', sortable: false },
        ],
        // 标签管理
        tagDialog: false,
        editTagMode: false,
        currentTag: {},
        tagHeaders: [
          { text: '名称', value: 'name' },
          { text: '操作', value: 'actions', sortable: false },
        ],
        // 评论管理
        commentHeaders: [
          { text: '评论内容', value: 'content' },
          { text: '用户', value: 'user' },
          { text: '操作', value: 'actions', sortable: false },
        ],
      }
    },
    computed: {
      // 从 Vuex 获取数据
      articles() {
        return this.$store.state.articles
      },
      categories() {
        return this.$store.state.categories
      },
      tags() {
        return this.$store.state.tags
      },
      comments() {
        return this.$store.state.comments // 假设有 comments 状态
      },
    },
    methods: {
      // 登录
      async login() {
        // 实现登录逻辑
        try {
          const response = await this.$axios.post('/api/login', this.loginForm)
          this.$store.commit('SET_USER', response.data.user)
        } catch (error) {
          console.error('登录失败', error)
        }
      },
      // 文章管理
      openArticleDialog() {
        this.editMode = false
        this.currentArticle = {}
        this.articleDialog = true
      },
      editArticle(article) {
        this.editMode = true
        this.currentArticle = { ...article }
        this.articleDialog = true
      },
      closeArticleDialog() {
        this.articleDialog = false
      },
      saveArticle() {
        if (this.editMode) {
          // 更新文章
          this.$axios.put(`/api/articles/${this.currentArticle.id}`, this.currentArticle)
            .then(() => {
              this.$store.dispatch('fetchArticles')
              this.closeArticleDialog()
            })
        } else {
          // 新增文章
          this.$axios.post('/api/articles', this.currentArticle)
            .then(() => {
              this.$store.dispatch('fetchArticles')
              this.closeArticleDialog()
            })
        }
      },
      deleteArticle(id) {
        this.$axios.delete(`/api/articles/${id}`)
          .then(() => {
            this.$store.dispatch('fetchArticles')
          })
      },
      // 分类管理
      openCategoryDialog() {
        this.editCategoryMode = false
        this.currentCategory = {}
        this.categoryDialog = true
      },
      editCategory(category) {
        this.editCategoryMode = true
        this.currentCategory = { ...category }
        this.categoryDialog = true
      },
      closeCategoryDialog() {
        this.categoryDialog = false
      },
      saveCategory() {
        if (this.editCategoryMode) {
          this.$axios.put(`/api/categories/${this.currentCategory.id}`, this.currentCategory)
            .then(() => {
              this.$store.dispatch('fetchCategories')
              this.closeCategoryDialog()
            })
        } else {
          this.$axios.post('/api/categories', this.currentCategory)
            .then(() => {
              this.$store.dispatch('fetchCategories')
              this.closeCategoryDialog()
            })
        }
      },
      deleteCategory(id) {
        this.$axios.delete(`/api/categories/${id}`)
          .then(() => {
            this.$store.dispatch('fetchCategories')
          })
      },
      // 标签管理
      openTagDialog() {
        this.editTagMode = false
        this.currentTag = {}
        this.tagDialog = true
      },
      editTag(tag) {
        this.editTagMode = true
        this.currentTag = { ...tag }
        this.tagDialog = true
      },
      closeTagDialog() {
        this.tagDialog = false
      },
      saveTag() {
        if (this.editTagMode) {
          this.$axios.put(`/api/tags/${this.currentTag.id}`, this.currentTag)
            .then(() => {
              this.$store.dispatch('fetchTags')
              this.closeTagDialog()
            })
        } else {
          this.$axios.post('/api/tags', this.currentTag)
            .then(() => {
              this.$store.dispatch('fetchTags')
              this.closeTagDialog()
            })
        }
      },
      deleteTag(id) {
        this.$axios.delete(`/api/tags/${id}`)
          .then(() => {
            this.$store.dispatch('fetchTags')
          })
      },
      // 评论管理
      approveComment(id) {
        // 审核评论逻辑
        this.$axios.post(`/api/comments/${id}/approve`)
          .then(() => {
            this.$store.dispatch('fetchComments') // 假设有 fetchComments action
          })
      },
      deleteComment(id) {
        this.$axios.delete(`/api/comments/${id}`)
          .then(() => {
            this.$store.dispatch('fetchComments')
          })
      },
    },
    created() {
      // 获取初始数据
      this.$store.dispatch('fetchArticles')
      this.$store.dispatch('fetchCategories')
      this.$store.dispatch('fetchTags')
      this.$store.dispatch('fetchComments') // 假设有 fetchComments action
    },
  }
  </script>
  